<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>博客后端管理页面</title>
    <link rel="stylesheet" type="text/css" href="../../static/css/semantic.min.css">
    <link rel="stylesheet" type="text/css" href="../../static/css/index.css">
    <!--引入markdown css-->
    <link rel="stylesheet" href="../../static/markdown/css/editormd.css" />
</head>
<body>

<!--头部导航-->
<nav class="ui inverted attached segment m-shadow-small">
    <div class="ui container">
        <!--stackable 表明可以堆列 移动端适配-->
        <div class="ui inverted stackable secondary menu m-min">
            <h2 class="ui teal item header">后台管理系统</h2>
            <a href="" class="active m-item item m-mobile-hide"><i class=" home icon"></i>博客</a>
            <a href="" class=" m-item item m-mobile-hide"><i class=" idea icon"></i>分类</a>
            <a href="" class=" m-item item m-mobile-hide"><i class=" tags icon"></i>标签</a>
            <div class="right m-item item m-mobile-hide">
                <div class="ui item dropdown">
                    <div class="text">
                        <img class="ui avatar image" src="../../static/images/box.png">
                        赵广晓
                    </div>
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <a href="#" class="item" target="_blank">注销</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-mobile-top-right m-mobile-show">
        <i class="sidebar icon"></i>
    </a>
</nav>

<!--二级导航-->
<div class="ui attached pointing menu">
    <div class="ui container">
        <a href="#" target="_blank" class="active teal item">发布</a>
        <a href="#" target="_blank" class="item">列表</a>
    </div>
</div>

<!--中间内容   ctrl+enter先输入内容然后注释-->
<!--div +tab 快速补全代码-->
<div class="m-container-small m-padded-tb-big">
    <div class="container">
        <form action="#" method="post" class="ui form">
            <!--显示错误内容-->
            <div class="field">
                <div class="ui error message"></div>
            </div>

            <div class="field">
                <div class="ui left labeled input">
                    <div class="ui selection dropdown">
                        <input type="hidden" name="original">
                        <i class="dropdown icon"></i>
                        <div class="default text">原创</div>
                        <div class="menu">
                            <div class="item" data-value="1">原创</div>
                            <div class="item" data-value="0">转载</div>
                            <div class="item" data-value="0">翻译</div>
                        </div>
                    </div>
                    <input type="text" placeholder="标题" name="title">
                </div>
            </div>

            <div class="field">
                <div id="test-markdown-view" style="z-index:1 !important;">
                    <textarea style="display:none;" name="content" placeholder="内容"></textarea>
                </div>
            </div>

            <div class="fields two">
                <div class="field">
                    <div class="ui left labeled action input">
                        <label class="ui compact teal basic label">分类</label>
                        <div class="ui fluid selection dropdown">
                            <input type="hidden" name="category">
                            <i class="dropdown icon"></i>
                            <div class="default text">分类</div>
                            <div class="menu">
                                <div class="item" data-value="1">错误日志</div>
                                <div class="item" data-value="0">开发者手册</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="field">
                    <div class="ui  left labeled action input">
                        <label class="ui compact teal basic label">标签</label>
                        <div class="ui fluid multiple search selection dropdown">
                            <input type="hidden" name="tags">
                            <i class="dropdown icon"></i>
                            <div class="default text">标签</div>
                            <div class="menu">
                                <div class="item" data-value="1">Java</div>
                                <div class="item" data-value="0">javaScript</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="field">
                <div class="ui left labeled action input">
                    <label class="ui compact teal basic label">首图</label>
                    <input type="text" placeholder="首图地址" name="firstPicture">
                </div>
            </div>



            <div class="inline fields">
                <div class="field">
                    <div class="ui checkbox">
                        <input type="checkbox" tabindex="0" id="recommend" class="hidden">
                        <label for="recommend">推荐</label>
                    </div>
                </div>
                <div class="field">
                    <div class="ui checkbox">
                        <input type="checkbox" tabindex="0" id="reprint" class="hidden">
                        <label for="reprint">转载声明</label>
                    </div>
                </div>
                <div class="field">
                    <div class="ui checkbox">
                        <input type="checkbox" tabindex="0" id="appreciate" class="hidden">
                        <label for="appreciate">赞赏</label>
                    </div>
                </div>
                <div class="field">
                    <div class="ui checkbox">
                        <input type="checkbox" tabindex="0" id="command" class="hidden">
                        <label for="command">评论</label>
                    </div>
                </div>
            </div>
            <div class="ui right aligned container">
                <button class="ui button" type="button" onclick="window.history.go(-1)">返回</button>
                <button class="ui button secondary button">保存</button>
                <button class="ui teal button" type="submit">发布</button>
            </div>
        </form>

    </div>
</div>


<!--尾部-->
<footer class="ui inverted segment vertical m-max">
    <div class="ui center aligned container">
        <div class="ui inverted stackable divided grid">
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="../../static/images/2017-07-10_59631d2325129.jpg" alt="" class="ui rounded image"
                             style="width: 10em;height: 10em">
                    </div>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">用户故事</a>
                    <a href="#" class="item">用户故事</a>
                    <a href="#" class="item">用户故事</a>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced">联系我们</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">Email:1764773283@qq.com</a>
                    <a href="#" class="item">qq:1764773283</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced">Blog</h4>
                <p class="m-text-thin m-text-spaced m-opacity-mini">
                    这是我的个人博客,会分享关于编程,写作,思考相关的任何内容,希望可以
                    给来到这里的人有所帮助...
                </p>
            </div>
        </div>
        <div class="ui inverted section divider"></div>
        <p class="m-text-thin m-text-spaced m-opacity-mini">
            浙ICP备19020311号-1 网站名称 青春似水流年
        </p>
    </div>
</footer>


<!--引入js-->
<script src="../../static/js/jquery.min.js"></script>
<!--引入semantic js-->
<script src="../../static/js/semantic.min.js"></script>
<!--引入markdownjs-->
<script src="../../static/markdown/editormd.js"></script>
<script src="../../static/markdown/lib/marked.min.js"></script>
<script src="../../static/markdown/lib/prettify.min.js"></script>

<script>
    var testEditor;

    // markdown 初始化
    testEditor = editormd("test-markdown-view", {
        width   : "100%",
        height  : 640,
        syncScrolling : "single",
        path    : "../static/markdown/lib/",
        // saveHTMLToTextarea : true, // 保存HTML到Textarea
    });


    // 移动端动态显示头部标签
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });


    $('.ui.dropdown').dropdown();

    // 表单验证
    $('.ui.form')
        .form({
            fields: {
                name: {
                    identifier: 'original',
                    rules: [
                        {
                            type   : 'empty',
                            prompt : '请选择是否原创'
                        }
                    ]
                },
                skills: {
                    identifier: 'title',
                    rules: [
                        {
                            type   : 'empty',
                            prompt : '文章标题不能为空'
                        }
                    ]
                },
                gender: {
                    identifier: 'content',
                    rules: [
                        {
                            type   : 'empty',
                            prompt : '文章内容不能为空'
                        }
                    ]
                },
                username: {
                    identifier: 'category',
                    rules: [
                        {
                            type   : 'empty',
                            prompt : '文章分类不能为空'
                        }
                    ]
                },
                password: {
                    identifier: 'tags',
                    rules: [
                        {
                            type   : 'empty',
                            prompt : '文章标签不能为空'
                        }
                    ]
                },
                terms: {
                    identifier: 'firstPicture',
                    rules: [
                        {
                            type   : 'empty',
                            prompt : '首图地址不能为空'
                        }
                    ]
                }
            }
        });


</script>
</body>
</html>